<script setup lang="ts">
defineProps<{
  title?: string
  shadow?: 'always' | 'hover' | 'never'
}>()
</script>

<template>
  <el-card :shadow="shadow || 'always'">
    <template #header v-if="title">
      <div>
        <span>{{ title }}</span>
        <slot name="header-action"></slot>
      </div>
    </template>
    <slot></slot>
  </el-card>
</template>

<style scoped>
.el-card :deep(.el-card__header) {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style> 